<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学生成绩管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="student.css">
</head>
<body>
<div class="layout">
  <!-- 侧边栏 ... -->
  <div class="main">
    <div class="header">
      <span class="header-title">课程详情</span>
      <span class="header-user" id="username"></span>
    </div>
    <div class="content">
      <!-- 背景装饰 ... -->
      <div id="course-detail-box"
           style="background: #fff; border-radius: 12px; padding: 32px; max-width: 800px; margin: 0 auto; box-shadow: 0 0 20px rgba(100,120,160,0.1); position: relative; z-index: 1;">
        <div id="detail-loading" style="text-align:center; color:#888;">加载中...</div>
        <!-- 课程内容动态插入 -->
      </div>
    </div>
  </div>
</div>
<script>
  // 工具函数：获取URL参数
  function getQueryParam(name) {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
  }

  function renderCourseDetail(course) {
    const box = document.getElementById('course-detail-box');
    box.innerHTML = `
      <div style="font-size: 24px; font-weight: bold; color: #333; margin-bottom: 8px;">
        ${course.courseNumber}
      </div>
      <div style="color: #888; font-size: 14px; margin-bottom: 20px;">
        讲师：${course.tname} ｜ 发布时间：${course.created_at}
      </div>
      <div style="color: #888; font-size: 14px; margin-bottom: 20px;">
      上课地点：${course.location || '未知'}
      </div>
      <div style="font-size: 16px; line-height: 1.7; color: #444;">
        ${course.courseDesc}
      </div>
    `;
  }

  document.addEventListener('DOMContentLoaded', function () {
  fetch('/student/{user_id}')
    .then(res => res.json())
    .then(user => {
      // 假如后端返回 Sname 字段
      document.getElementById('username').textContent = user.Sname + "【学生】";
    })
    .catch(() => {
      document.getElementById('username').textContent = "未登录【学生】";
    });
});

window.onload = function() {
  const courseData = sessionStorage.getItem('selectedCourse');
  if (!courseData) {
    document.getElementById('detail-loading').textContent = '课程数据缺失';
    return;
  }
  const course = JSON.parse(courseData);
  renderCourseDetail(course);
};

</script>
</body>
</html>